<html lang="en"> <head> <script src="https://d3js.org/d3.v3.js"></script> </head> <body>
    <script type="text/javascript" charset="utf-8">
        var width = 500, height = 500;
        var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g")
            .attr("transform", "translate(40,0)");
        // 定义一个集群图布局
        var tree = d3.layout.tree()
            .size([width, height - 200])  // 设定尺寸, 即转换后的各节点的坐标在哪一个范围内
            .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });  // 设定节点之间的间隔
        // d3.svg.diagonal(): 这是一个对角线生成器, 只需要输入两个顶点坐标, 即可生成一条贝塞尔曲线
        // projection() 是一个点变换器, 默认是 [ d.x, d.y ], 即保持原坐标不变, 如果写成 [ d.y, d.x ] , 即是说对任意输入的顶点, 都交换 x 和 y 坐标。
        var diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.y, d.x]; });
        // 转换数据, d3.json() 是用来向服务器请求 JSON 文件的, 只有用 Firefox 才能读取本地文件, 出于安全考虑
        d3.json("city_tree.json", function(error, root) {  // root 是指读入的数据
            var nodes = tree.nodes(root);  // 调用 tree 转换数据
            var links = tree.links(nodes);
            console.log(nodes, links);
            // nodes 中有各个节点的子节点（children）、深度（depth）、名称（name）、位置（x, y）信息, 其中名称（name）是 json 文件中就有的属性。
            // links 中有连线两端（ source , target ）的节点信息。
            // 下面是绘制连线
            var link = svg.selectAll(".link").data(links).enter().append("path")
                .attr("class", "link")
                .attr("d", diagonal);  // 使用对角线生成器
            var node = svg.selectAll(".node").data(nodes).enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
            node.append("circle").attr("r", 4.5);
            node.append("text")
                .attr("dx", function(d) { return d.children ? -8 : 8; })
                .attr("dy", 3)
                .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
                .text(function(d) { return d.name; });
        });
    </script> </body> </html>
